<template>
  <div v-if="wcshow" class="wordcloud" :style="{width: '700px', height: '550px'}">
    <div class="word" v-if="$route.name ==='Index'||date === null">全平台今日词云图</div>
    <div class="word" v-if="$route.name ==='Chart' && date !== null">全平台当日词云图</div>
    <img alt="" :src="imgurl" class="img">
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "WordCloud",
  data() {
    return {
      imgurl:"",
      wcshow: false,
    }
  },
  computed:{
    ...mapState(['date','time']),
    //同时监听两个数据
    listenChange () {
      const _this = this
      const date = _this.date
      const time =_this.time
      return {date,time}
    }
  },
  methods:{
    getyesterdayDate() {
      // let b = 24*60*60*1000   //一天的时间
      let day = new Date();  //当天的时间
      //
      // v == 3 ? day.setTime(day.getTime()-b) : v == 6 ?
      //     day.setTime(day.getTime()) : day.setTime(day.getTime() + b);

      let dayMon=(day.getMonth() + 1) >= 10 ? day.getMonth()+1 : '0' + (day.getMonth() + 1)
      let dayDat=(day.getDate() ) >= 10 ? day.getDate() : '0' + (day.getDate())
      // console.log(day.getFullYear() + "-" + dayMon + "-" + dayDat)
      return day.getFullYear() + "-" + dayMon + "-" + dayDat;
    }
  },
  mounted() {
    const _this = this
    try {
      console.log(this.getyesterdayDate())
      _this.imgurl=require('../assets/wordcloud/'+this.getyesterdayDate() +'.jpg')
      _this.wcshow=true
    }catch (e){
      _this.wcshow=false
    }

  },
  watch:{
    listenChange(val){
      if (this.$route.name ==='Chart'){
        const _this = this
        // console.log(_this.imgurl)
        try {
          _this.imgurl=require('../assets/wordcloud/'+_this.date +'.jpg')
          _this.wcshow=true
        }catch (e){
          _this.wcshow=false
        }
      }
    },
  }
}
</script>

<style scoped>
.wordcloud {
  margin-top: 5px;
  width: 700px;
  background: white;
  text-align: center;
}
.wordcloud:hover {
  -webkit-box-shadow: #ccc 0px 10px 10px;
  -moz-box-shadow: #ccc 0px 10px 10px;
  box-shadow: #ccc 0px 10px 10px;
}
.word{
  text-align: center;
  font-size: 25px;
  font-family: 黑体,serif;
  padding-top: 15px;
}
.img{
  width: 500px;
  height: 500px;
  margin-top: 5px;
}
</style>